<template>
  <div>
    <QrcodeSvg class="img" :value="qrContent" :options="qrOptions" />
  </div>
</template>

<script setup lang="ts">
  // 由于预览是repl的沙河环境，直接使用默认导出QrcodeVue是渲染canvas，但是没法找到refs的dom元素，这里使用svg可以正常使用
  import { QrcodeSvg } from "qrcode.vue";
  import { ref } from "vue";

  const qrOptions = ref({
    margin: 1, // 边距
    width: 200, // 宽度
    color: {
      dark: "#34495e", // 深色模块
      light: "#ffffff", // 浅色背景
    },
    ecLevel: "H", // 纠错级别 (L, M, Q, H)
  });
  const qrContent = window.location.href;
</script>

<style scoped></style>
